<template>
    <div class="getfreessq">
        <img src="//common-1253410441.costj.myqcloud.com/activityimg/20171030113622.png" alt="">
        <section>
            <img class="imgsuccess" v-if="success===true"
                 src="//common-1253410441.costj.myqcloud.com/activityimg/53b2878a7bbdd.png"
                 alt="">
            <label v-else>
                <input type="text" v-model="code" placeholder="请输入16位兑换码" maxlength="16"/>
            </label>
        </section>
        <a href="javascript:;">
            <img v-if="success===true" @click="jumpddetails(id)"
                 src="//common-1253410441.costj.myqcloud.com/activityimg/20171030142112.png"
                 alt="">
            <img v-else @click="sendCode(code)"
                 src="//common-1253410441.costj.myqcloud.com/activityimg/20171030113623.png" alt="">
        </a>
        <article>
            <span>活动规则</span>
            <p>
                1、每个用户可以领取一注双色球。<br/>
                2、限量10000注，先到先得，领完截止。<br/>
                3、每个手机号和设备只能领取一注。<br/>
                4、如发现恶意作弊，将做封号处理。<br/>
                5、活动解释权归本应用所有<br/>
            </p>
        </article>
    </div>

</template>

<script>
    import {Toast} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative} from '../../utils/otherfn';
    import {namesource, jumptype} from '../../utils/config/common';
    import TDbridge from '../../utils/bridge';
    import axios from 'axios';
    export default {
        components: {
            Toast
        },
        data() {
            return {
                code: '',
                success: false,
                id: ''
            };
        },
        created() {
        },
        mounted(){
            document.querySelector('.getfreessq') && (document.querySelector('.getfreessq').style.minHeight = document.documentElement.clientHeight + 'px');
        },
        methods: {
            /**
             * 获取一些初始化信息
             */
            jumpfn(){
                nativetonative(jumptype[1]);
            },
            sendCode: async function (Code) {
                var that = this;
                that.$vux.toast.show({
                    'is-show-mask': true,
                    'type': 'text',
                    'text': '提交中'
                });
                const {token}=await getMytoken(true);
                if(!token) {
                    getLogintoken(function (value) {
                        console.log('vvv', value);
                        if(value) {
                            location.reload();
                        }
                    }).then(({token})=> {
                    });
                    return;
                }
                if(Code.length != 16) {
                    that.$vux.toast.text('兑换码格式不正确');
                    return;
                }
                const {data}=await axios.get(`/hd/Handler.ashx?action=1124&params={"UserCode":"${token}","Code":"${Code}"}`);
                if(data && data.code === 0) {
                    this.success = true;
                    this.id = data.data.SchemeID;
                    that.$vux.toast.text(data.msg);
                } else {
                    that.$vux.toast.text(data.msg);
                }

            },
            jumpddetails(id){
                if(id) {
                    let senddata = {
                        title: '方案详情',
                        "pageType": "1",
                        jumpType: 2,
                        url: `${location.origin}/#/my/pnornamldetails/${id}`,
                    };
                    try {
                        TDbridge.appPlugin.startAppPlugin({'type': 20, 'message': 'yc'});
                        TDbridge.skipApp.startSkipApp(senddata)
                    }
                    catch (e) {

                    }
                }
                else {
                    that.$vux.toast.text('未获取到订单ID');
                }

            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    .getfreessq {
        background: #10203d;
        img {
            display: block;
            width: 100%;
        }
        section {
            label {
                height: 150px;
                display: block;
            }
            .imgsuccess {
                width: 515px;
                display: block;
                margin: 0 auto;
                margin-bottom: 70px;
            }
            input {
                display: block;
                margin: 0 auto;
                width: 500px;
                box-sizing: border-box;
                height: 92px;
                border-radius: 100px;
                line-height: 92px;
                text-indent: 50px;
                font-size: 32px;
                border: none;
                box-shadow: inset 0 20px 20px #ddd;;
            }
        }
        article {
            margin-left: 96px;
            font-size: 28px;
            span {
                color: #fbdd1d;
                display: block;
                margin: 80px 0 46px 0;
            }
            p {
                color: #fff;
                padding-bottom: 50px;
            }
        }
    }

</style>